Bootstrap Snippet Mobile Menu using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<div class="mobile-nav">
      <div class="menu-area">
        <a href="#" class="hummenu" id="humMenu"><i class="bi bi-list"></i></a>
      </div>
      <div class="logo-area">
        <a href="#">
          <img src="img/logo-pink.svg" alt="" class="img-responsive">
        </a>
      </div>
      <div class="cart-area">
        <a href="#" class="cart-icon">
          <span class="has-item"></span>
          <svg width="21px" height="21px" fill="#f1f1f1" viewBox="0 0 24 24"><path d="M16 7a1 1 0 0 1-1-1V3H9v3a1 1 0 0 1-2 0V3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v3a1 1 0 0 1-1 1z"></path><path d="M20 5H4a2 2 0 0 0-2 2v13a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a2 2 0 0 0-2-2zm0 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7h16z"></path></svg>
        </a>
      </div>
    </div>
    <div class="slidemenu-overlay"></div>
    <div class="slidemenu" id="slidemenu">
      <div class="slidemenu-header">
        <a href="#" class="close-menu" id="closeMenu"><i class="bi bi-x-lg"></i></a>
      </div> 
      <div class="slidemenu-menu-area">
        <ul class="list-unstyled slidemenu-items">
          <li><a href="#">Home</a></li>
          <li>
            <a href="#" data-toggle="collapse" data-target="#shop" class="collapsed">Shop Collection <i class="bi bi-plus-lg"></i><i class="bi bi-dash-lg"></i></a>
            <ul class="sub-menu list-unstyled collapse" id="shop">
              <li><a href="#">Earrings</a></li>
              <li><a href="#">Bangles</a></li>
            </ul>
          </li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.mobile-nav {
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 64px;
    background: #1f1f1f;
    z-index: 9;
  }
  @media (max-width: 992px) {
    .mobile-nav {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
  }
  .mobile-nav .logo-area {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
  }
  .mobile-nav .logo-area a {
    padding: 15px;
    display: inline-block;
  }
  .mobile-nav .logo-area img {
    max-width: 20px;
    display: inline-block;
  }
  .mobile-nav .menu-area {
    width: 60px;
  }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('#slidemenu').on('show.bs.collapse','.collapse', function() {
      $('#slidemenu').find('.sub-menu.in').collapse('hide');
      });
      $('#filterBox').on('show.bs.collapse','.collapse', function() {
          $('#filterBox').find('.sub-menu.in').collapse('hide');
      });
      $('#humMenu').click(function(){
          $('#slidemenu').addClass('menu-open');
          $('.slidemenu-overlay').addClass('open');
      });
      $('#closeMenu').click(function(){
          $('#slidemenu').removeClass('menu-open');
          $('.slidemenu-overlay').removeClass('open');
      });
      $('.slidemenu-overlay').click(function(){
          $('#slidemenu').removeClass('menu-open');
          $('#filterBox').removeClass('menu-open');
          $(this).removeClass('open');
      });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Mobile Menu"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

Related: See More

Questions / Comments:

"Mobile Menu" Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

Related: See More

Questions / Comments:

"Mobile Menu"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY